<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
		</shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<view class="template-box">
				<view class="page-top">
					<view class="statistics-data">
						<view class="statistics-data-item">
							<text>今日收入</text>
							<text>100</text>
						</view>
						<view class="statistics-data-item">
							<text>采购金</text>
							<text>--</text>
						</view>
						<view class="statistics-data-item">
							<text>我的余额</text>
							<text>100</text>
						</view>
					</view>
				</view>
				<!-- nav -->
				<view class="nav-box" >
					<view class="nav-item">
						<image class="nav-img" src="@/static/images/icons/nav_1.png"></image>
						<text>门店管理</text>
					</view>
					<view class="nav-item">
						<image class="nav-img" src="@/static/images/icons/nav_2.png"></image>
						<text>店铺订单</text>
					</view>
					<view class="nav-item">
						<image class="nav-img" src="@/static/images/icons/nav_3.png"></image>
						<text>优惠券</text>
					</view>
					<view class="nav-item">
						<image class="nav-img" src="@/static/images/icons/nav_4.png"></image>
						<text>报表查询</text>
					</view>
					<view class="nav-item">
						<image class="nav-img" src="@/static/images/icons/nav_5.png"></image>
						<text>用户总汇</text>
					</view>
				</view>
				<!-- 数据分析 -->
				<view class="notice">
					<view class="notice-title">
						数据分析
					</view>
					<view class="analysis-box">
						
					</view>
				</view>
				<!-- 公告 -->
				<view class="notice">
					<view class="notice-title">
						公告
					</view>
					<view class="notice-list">
						<view class="notice-list-item u-flex">
							<text class="item-icon">·</text>
							<text>快来看【国庆佳节】放假温馨提示</text>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
						<view class="notice-list-item u-flex">
							<text class="item-icon">·</text>
							<text>快来看【国庆佳节】放假温馨提示</text>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
						<view class="notice-list-item u-flex">
							<text class="item-icon">·</text>
							<text>快来看【国庆佳节】放假温馨提示</text>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 分类选项卡 -->
			<!-- 	<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs> -->
			<!-- 登录提示 -->
			<shopro-auth-modal></shopro-auth-modal>
			<!-- 悬浮按钮 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false
			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			let that = this;
			this.enable = true;
			this.isLogin && this.getCartList();
			// 网络变化检测
			uni.onNetworkStatusChange(res => {
				this.isConnected = res.isConnected;
				res.isConnected && this.init();
			});
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-VUE
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			}
		}
	};
</script>

<style lang="scss">
	.page-top {
		height: calc(var(--status-bar-height) + 320rpx);
		background: linear-gradient(315deg, #FF7E4A 0%, #FC5351 100%);
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0500);
		padding-top:  170rpx;

		.statistics-data {
			height: 248rpx;
			margin: 0 30rpx;
			background: linear-gradient(360deg, rgba(255, 255, 255, 0.9100) 0%, rgba(255, 255, 255, 0.9400) 38%, #FFFFFF 100%);
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0500);
			border-radius: 5px;
			display: flex;
			align-items: center;
			.statistics-data-item{
				width: 33%;
				text-align: center;
				display: flex;
				flex-direction: column;
			}
			.statistics-data-item text:first-child{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 34rpx;
				text-shadow: 0px 4rpx 20rpx rgba(0,0,0,0.0500);
			}
			.statistics-data-item text:last-child{
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 50rpx;
				text-shadow: 0px 4rpx 20rpx rgba(0,0,0,0.0500);
				margin-top: 4rpx;
			}
		}
		
	}
	.nav-box{
		margin-top: -24rpx;
		display: flex;
		align-items: center;
		height: 196rpx;
		background-image: url(../../static/images/icons/nav-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		.nav-item{
			width: 20%;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			text-align: center;
			.nav-img{
				width: 48rpx;
				height: 48rpx;
				margin: 44rpx auto 18rpx auto;
			}
		}
		
	}
	.analysis-box{
		min-height: 200rpx;
	}

	.notice {
		margin-top: 24rpx;
		background-color: #fff;
		padding: 0 40rpx 40rpx 40rpx;

		.notice-title {
			padding: 34rpx 0 30rpx 0;
			font-size: 30rpx;
			font-weight: 500;
			color: #222222;
			border-bottom: 2rpx solid #E7E7E7;
			margin-bottom: 4rpx
		}

		.notice-list-item {
			margin-top: 24rpx;
			.item-icon {
				margin-right: 10rpx;
			}
			.u-icon{
				margin-left: auto;
			}
		}
	}
</style>
